const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//将CSS样式提取成一个独立的css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//设置node环境变量
// process.env.NODE_ENV = 'development';
// css 压缩插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    //入口
    entry: './src/index.js',
    //出口
    output: {
        filename: 'js/bundle.js',
        path: resolve(__dirname, 'dist')
    },
    //loader设置
    module: {
        rules: [
            /*
            当一个文件被多个loader处理时，一定要指定loader的执行顺序
            js文件 要限制性eslint 后只需babel
            */
            //js语法检查 eslint-loader eslint 
            //注意，语法检查只检查自己写的代码  第三方的js代码不检查
            //设置检查规则：package.json中的eslintConfig中设置 
            /***    
             *  "eslintConfig": {
                    "extends": "airbnb-base"
                }
             */

            //airbnb--> eslint-config-airbnb-base  eslint and eslint--plugin-import
            {
                test: /\.js$/,
                exclude: '/node_modules/',
                //优先执行
                enforce: 'pre',
                loader: 'eslint-loader',
                //自动修复eslint的错误
                options: {
                    fix: true
                }
            },
            /**
             * JS兼容处理 babel-loader @babel/core 
             * 1、基本js兼容处理 @babel/preset-env 只能转换基本语法，问题：如promise等就不能转化
             * 2、全部js兼容处理@babel/polyfill  只需要在要转化的js文件中  import '@babel/polyfill' 问题：文件会变太大
             * 3、需要做兼容处理的就处理：按需加载--》core-js  
             */
            {
                test: /\.js$/,
                exclude: '/node_modules/',
                loader: 'babel-loader',
                options: {
                    presets: [
                        ["@babel/preset-env",
                            //core-js 
                            {
                                useBuiltIns: "entry", // or "usage"
                                //core-js的版本
                                corejs: 3,
                                //需要兼容的浏览器
                                // targets: {
                                //     chrome: '60',
                                //     firefox: '60',
                                //     ie: '7',
                                //     safari: '10',
                                //     edge: '17'
                                // }

                            }
                        ]
                    ]
                }
            },
            {
                test: /\.css$/,
                use: [
                    // "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    "css-loader",
                    /*
                    css兼容性处理：postcss 下载--> postcss-loader  postcss-preset-env
                    命令：cnpm install postcss-loader postcss-preset-env -D
                    postcss-preset-env 这个插件是帮助postcss找到package.json中的browserslist里面的配置，通过配置加载指定的css兼容
                    样式。  默认是生产环境，想要变为开发环境->设置nodejs环境变量：process.env.NODE_ENV = development
                  
                      "browserslist": {
                        "development": [
                        "last 1 chrome version",
                        "last 1 firefox version",
                        "last 1 safari version"
                        ],
                        "production": [
                        ">0.2%",
                        "not dead",
                        "not op_mini all"
                        ]
                    }
                      */
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "postcss-preset-env"
                                    ]
                                ]
                            }
                        }
                    }

                ]
            },
            {
                test: /\.less$/,
                use: [
                    // "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "postcss-preset-env"
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                //使用url-loader 要下载 url-loader和file-loader
                loader: 'url-loader',
                options: {
                    //图片大小小于8kb，就会被base64处理.优点：减少请求数量（减轻了服务器压力） 缺点：图片体积会变大（文件请求速度回慢）
                    limit: 8 * 1024,
                    esModule: false,
                    name: '[hash:10].[ext]',
                    outputPath: 'img'
                }
            },
            {
                test: /\.(png|woff|woff2|svg|ttf|eot)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 100000,  //这里要足够大这样所有的字体图标都会打包到css中
                        name: '[hash:10].[ext]',
                        outputPath: 'css/font'
                    },

                }
            },
            {
                test: /\.html$/,
                //处理html文件的img图片 （负责引入img，从而能被url-loader进行处理）
                loader: 'html-loader',
                options: {
                    /**
                 * 问题：因为url-loader默认使用的是es6模块化解析，而html-loader引入图片是commonjs，解析时会出现问题：[object-Module]
                 * 解决：关闭url-loader的es6模块化，使用commonjs解析
                */
                    esModule: false
                }
            }
        ]
    },
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new MiniCssExtractPlugin({
            filename: 'css/commons.css'
        }),
        //压缩css
        new OptimizeCssAssetsPlugin()
    ],
    //模式
    mode: "development",
    //开发服务器   npx webpack serve
    devServer: {
        contentBase: resolve(__dirname, 'dist'),
        compress: true,
        port: 8888,
        open: true

    }

}